<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-11-04 10:35:41
 * @LastEditTime: 2022-11-18 10:41:30
 * @FilePath: \vue3\src\views\vue3Study\cssChildrenSolt.vue
-->
<template>
    <div>
        <div class="headercss">
            <slot name="header">

                
            </slot>
        </div>
        <div>
            <slot></slot>
        </div>
        <div class="bodyercss">
            <slot name="bodyer"></slot>
        </div>
        <div class="footercss">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script setup>

</script>
<style lang="scss" >
.headercss{
    width: 100%;
    height: 50px;
    background-color: red;
}
.bodyercss{
    width: 100%;
    height: 50px;
    background-color: blue;
}
.footercss{
    width: 100%;
    height: 50px;
    background-color: yellow;
}

</style>>